<template>
  <!-- bar导航栏 -->
  <div class="housekeeping-details">
    <mt-header class="mt_header"
               fixed>
      <router-link to="/my"
                   slot="left"
                   style="font-size: 16px;">
        <mt-button style="margin-left: 19px;
        font-size: 16px;
        font-family: PingFangSC-bold;
        color: rgba(255, 255, 255, 100);">家政平台</mt-button>
      </router-link>
    </mt-header>
    <!-- 轮播图 -->
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="(item, index) in lunList"
                     :key="index"><img :src="item.url"
             alt=""></mt-swipe-item>
    </mt-swipe>
    <!-- 关注人数 -->
    <div class="userNaber_box">
      <div class="userNaber">
        <div class="userNaber_left">
          <span style="font-size: 24px; color: #3F51B5">{{enrollmentList.zchunum}}</span>
          <span style="font-size: 13px">{{enrollmentList.zhuce}}</span>
        </div>
        <div class="userNaber_right"><span style="font-size: 24px; color: #3F51B5">{{enrollmentList.kehunum}}</span>
          <span style="font-size: 13px">{{enrollmentList.kehu}}</span>
        </div>
      </div>
      <div class="userNaber_btn">
        <mt-button type="primary"
                   @click="addfolweuser">{{actioner}}</mt-button>
      </div>
    </div>
    <!-- 业务范围 -->
    <div class="scope_service">
      <div class="scope_service_hei">
        <span>|</span>
        <span>业务范围</span>
      </div>
      <div class="scope_service_user">
        <div class="scope_service_user_item"
             :key='index'
             v-for="(item, index) in bussnisescopeList">
          <span class="scope_service_user_item_img"><img :src="item.url"
                 alt=""></span>
          <span class="scope_service_user_item_text">{{item.name}}</span>
        </div>
      </div>
    </div>
    <mt-navbar class="company_profile_bar"
               v-model="selected">
      <mt-tab-item class="height"
                   id="1">家服公司</mt-tab-item>
      <mt-tab-item class=""
                   id="2">家服人员</mt-tab-item>
    </mt-navbar>
    <!-- 公司资质 -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <!-- <div class="company_profile_certification">
          <div class="company_profile_hei">
            <span>|</span>
            <span>公司资质</span>
          </div>
          <div class="company_profile_img">
            <span><img src="@/assets/jiazheng02.jpg"
                   alt=""></span>
            <span><img src="@/assets/jiazheng02.jpg"
                   alt=""></span>
            <span><img src="@/assets/jiazheng02.jpg"
                   alt=""></span>
          </div>
        </div> -->
        <!-- 办公环境 -->
        <div class="company_profile_certification"
             :key="index"
             v-for='(item, index) in manyscopepic'>
          <div class="company_profile_hei">
            <span>|</span>
            <span>{{item.name}}</span>
          </div>
          <div class="company_profile_img"
               v-if="item.id === '0' || item.id === '1' || item.id === '2' || item.id === '3'">
            <span><img :src="item.url_one"
                   alt=""></span>
            <span><img :src="item.url_three"
                   alt=""></span>
            <span><img :src="item.url_two"
                   alt=""></span>
          </div>
          <div class="company_profile_datatext"
               v-if="item.id === '4'">
            <div class="name">公司名称：{{item.companyName}}</div>
            <div class="respresent">法人代表：{{item.companyboss}}</div>
            <div class="phone">公司电话：{{item.companyphone}}</div>
            <div class="people">公司规模：{{item.companypeople}}</div>
            <div class="dizhi">公司地址：{{item.companyloader}}</div>
          </div>
          <div class="company_profile_datatext"
               v-else-if="item.id === '5'">
            <div class="name">P{{item.url_text}}</div>
          </div>
        </div>
        <mt-tabbar v-model="whasss"
                   class="caonimama">
          <mt-tab-item id="外卖">
            <i slot="icon"
               class="jiazheng icon-fenxiang"
               @click="participationShow = true"></i>
            分享
          </mt-tab-item>
          <mt-tab-item id="订单">
            <i slot="icon"
               class="jiazheng icon-weixin"
               @click="PromptShow('weixing')"></i>
            微信联系
          </mt-tab-item>
          <mt-tab-item id="发现">
            <i slot="icon"
               class="jiazheng icon-dianhua"
               @click="PromptShow('dianhua')"></i>
            电话联系
          </mt-tab-item>
        </mt-tabbar>
      </mt-tab-container-item>
      <!-- 第二列 -->
      <mt-tab-container-item id="2">
      </mt-tab-container-item>
    </mt-tab-container>
    <!--  -->
    <mt-tabbar v-model="whasss"
               class="caonimama">
      <mt-tab-item id="外卖">
        <i slot="icon"
           class="jiazheng icon-fenxiang"></i>
        分享
      </mt-tab-item>
      <mt-tab-item id="订单">
        <i slot="icon"
           class="jiazheng icon-weixin"></i>
        微信联系
      </mt-tab-item>
      <mt-tab-item id="发现">
        <i slot="icon"
           class="jiazheng icon-dianhua"
           @click="PromptShow('dianhua')"></i>
        电话联系
      </mt-tab-item>
    </mt-tabbar>
    <!-- 点击分享弹出层 -->
    <van-share-sheet v-model="participationShow"
                     title="立即分享给好友"
                     :options="options" />
  </div>
</template>

<script>
// import '@/mock/wsm.js'
import { setItem, getItem } from '@/mock/wsm.js'
import { slideshow, enrollment, bussnisescope, manyscopepic, addFlowerUser } from '@/api/housekeeping.js'
export default {
  name: 'HousekeepingDetails',
  props: {},
  components: {},
  data () {
    return {
      // 点击分享弹出层
      participationShow: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
      selected: '1',
      whasss: '',
      actioner: '关注',
      lunList: [], // 轮播图数据
      enrollmentList: {}, // 注册人数数据
      bussnisescopeList: [], // 业务范围数据
      manyscopepic: [], // 图片列表数据
      addFlowerLsit: [] // 关注人数
    }
  },
  created () {
    this.loading()
  },
  mounted () {

  },
  methods: {
    // 轮播图的点击
    handleClose () {
    },
    async loading () {
      try {
        const { data: res } = await slideshow()
        this.lunList = res
      } catch (err) {
        this.$toast('错误')
      }
      try {
        const { data: res } = await enrollment()
        this.enrollmentList = res
      } catch (err) {
        this.$toast('错误')
      }
      try {
        const { data: res } = await bussnisescope()
        this.bussnisescopeList = res
      } catch (err) {
        this.$toast('错误')
      }
      try {
        const { data: res } = await manyscopepic()
        this.manyscopepic = res
      } catch (err) {
        this.$toast('错误')
      }
    },
    // 点击微信或者电话提示框
    PromptShow (index) {
      if (index === 'weixing') {
        this.$dialog.confirm({
          title: '微信',
          message: '确定打开微信？',
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.$dialog.confirm({
          title: '电话',
          message: '确定电话联系？',
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 点击关注事件
    async addfolweuser () {
      try {
        setItem('addfloweruser', this.enrollmentList.zchunum)
        setItem('addfloweru', this.enrollmentList.kehunum)
        await addFlowerUser(this.enrollmentList.zchunum + 1)
        const { data: res } = await addFlowerUser(this.enrollmentList.kehunum + 1)
        // this.addFlowerLsit = res
        this.actioner = '已关注'
        this.$toast('关注成功! ^_^ 谢谢您的关注')
        this.enrollmentList.zchunum = this.enrollmentList.zchunum + 1
        this.enrollmentList.kehunum = this.enrollmentList.kehunum + 1
      } catch (err) {
        this.$toast('错误' + err)
      }
    }
  },
  computed: {

  }
}
</script>

<style scoped lang="less">
.mt_header {
  height: 120px;
  background-color: #1196DB!important;
}
/deep/ .mint-swipe {
  padding-top: 120px;
  height: 342px;
  img {
    height: 100%;
    width: 100%;
  }
}
.userNaber {
  margin-top: 15px;
  height: 290px;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.userNaber_left,
.userNaber_right {
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.userNaber_box {
  position: relative;
  /deep/ .mint-button {
    position: absolute;
    height: 40px;
    width: 120px;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    border-radius: 200px;
  }
}
.scope_service {
  margin-top: 15px;
  height: 326px;
  background-color: #fff;
  .scope_service_hei {
    height: 106px;
    line-height: 106px;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    span:nth-child(1) {
      padding: 30px;
      font-weight: 700;
      color: #3f51b5 !important;
    }
  }
  .scope_service_user {
    .scope_service_user_item {
      display: inline-block;
      padding: 80px;
      height: 100%;
      .scope_service_user_item_img,
      .scope_service_user_item_text {
        font-size: 13px;
        display: flex;
        align-items: center;
        flex-direction: column;
      }
    }
    img {
      height: 48px;
      width: 48px;
      border-radius: 24px;
    }
  }
}
.company_profile_bar {
  margin-top: 15px;
}
.company_profile_certification {
  .company_profile_img {
    span {
      display: inline-block;
      height: 148px;
      width: 200px;
      padding: 0 20px;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.company_profile_hei {
  padding: 15px 0;
  font-size: 14px;
  span {
    padding: 30px 15px;
  }
}
.company_profile_datatext {
  font-size: 14px;
  color: #ccc;
  div {
    padding: 8px 10px;
  }
  .dizhi {
    word-wrap: break-word;
    word-break: normal;
  }
}
/deep/ .mint-cell-title {
  flex: none !important;
}
// 公司资料
/deep/ .mint-tabbar {
  height: 134px;
  display: flex;
  align-items: center;
  font-size: 24px;
  display: contents;
  display: flex;
  .mt-tab-item {
    flex: 1;
  }
  position: static !important;
}
/deep/ .mint-tab-item-icon {
  height: 44px;
  width: 44px;
  font-size: 24px;
}
/deep/ .mint-tab-item-label {
  color: #979191 !important;
}
/deep/ .jiazheng {
  font-size: 40px !important;
  padding-bottom: 6px;
  color: #979191;
}
</style>
